<template>
  <div class="app">
    <LoginModal 
      :visible="showLogin"
      @login-success="handleLoginSuccess"
      @login-failed="handleLoginFailed"
    />
    
    <MainLayout 
      v-if="isLoggedIn"
      @menu-change="handleMenuChange"
      @logout="handleLogout"
    >
      <!-- 根据当前菜单显示不同的内容 -->
      <component :is="currentComponent" />
    </MainLayout>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import axios from 'axios'
import LoginModal from './components/LoginModal.vue'
import MainLayout from './components/MainLayout.vue'
import ImageCategories from './components/ImageCategories.vue'
import FaceRecognition from './components/FaceRecognition.vue'
import PersonRecognition from './components/PersonRecognition.vue'
import ObjectRecognition from './components/ObjectRecognition.vue'
import DataImport from './components/DataImport.vue'
import Settings from './components/Settings.vue'

// 设置axios默认配置
axios.defaults.baseURL = 'http://localhost:8000'

const showLogin = ref(true)
const isLoggedIn = ref(false)
const currentMenu = ref('categories')

// 根据当前菜单计算要显示的组件
const currentComponent = computed(() => {
  const components = {
    categories: ImageCategories,
    face: FaceRecognition,
    person: PersonRecognition,
    object: ObjectRecognition,
    import: DataImport,
    settings: Settings
  }
  return components[currentMenu.value]
})

const handleLoginSuccess = (userData) => {
  showLogin.value = false
  isLoggedIn.value = true
  localStorage.setItem('token', userData.token)
  localStorage.setItem('userId', userData.userId)
  localStorage.setItem('username', userData.username)
}

const handleLoginFailed = (error) => {
  console.error('登录失败:', error)
  showLogin.value = true
  isLoggedIn.value = false
}

const handleMenuChange = (menuKey) => {
  currentMenu.value = menuKey
}

const handleLogout = () => {
  showLogin.value = true
  isLoggedIn.value = false
  localStorage.clear()
}
</script>

<style>
.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style> 